<template>
    <view class="searchBar"
        ><!-- :style="{background:background}" -->
        <view class="searchBar-main">
            <iconsfont customIcons="icon-sousuo" :color="'#999999'" size="30"></iconsfont>
            <input
                class="input input-search"
                :placeholder="placeholderText"
                placeholder-style="color:#cccccc"
                v-model="value"
                @input="changeValue" />
            <text class="btn-search" @click="searchFn">搜索</text>
        </view>
        <view class="searchBar-actions" v-if="actions && actions.length > 0">
            <view class="btn-action-item" :key="item.id" v-for="item in actions" @click="clickAction(item)">
                <uni-icons v-if="item.iconType == 1" :type="item.type" :color="'#333333'" size="44"></uni-icons>
                <iconsfont
                    v-else
                    :customIcons="item.type"
                    :color="'#333333'"
                    :size="item.type == 'icon-saoyisao' ? 52 : 36"></iconsfont>
                <text style="padding-left: 12rpx">筛选</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        placeholderText: {
            type: String,
            default: "",
        },
        searchValue: {
            type: String,
            default: "",
        },
        actions: {
            type: Array,
            default: () => [],
        },
        background: {
            type: String,
            default: "#ffffff",
        },
    },
    data() {
        return {
            value: "",
        }
    },
    mounted() {
        this.value = this.searchValue
    },
    methods: {
        searchFn() {
            //搜索
            let key = this.value
            if (key && key.length) {
                key = key.trim()
            } else {
                key = ""
            }
            this.$emit("searchFn", key)
        },
        clickAction(item) {
            //功能点击
            this.$emit("actionFn", item)
        },
        changeValue(input) {
            //输入变化
            this.$emit("changeSearchValue", input.detail.value)
        },
    },
}
</script>

<style lang="scss">
.searchBar {
    display: flex;
    flex-direction: row;
    padding: 12rpx $app-item-padding;
    align-items: center;
    // background:  $color-white;
    height: 96rpx;

    .searchBar-main {
        display: flex;
        flex-direction: row;
        flex: 1;
        background: $color-white;
        height: 72rpx;
        border-radius: 36rpx;
        align-items: center;
        padding: 0 20rpx;
        border-radius: 36rpx;
        border: 1rpx solid #cccccc;
        .input-search {
            display: flex;
            flex: 1;

            padding: 10rpx;
            font-size: 24rpx;
        }
        .btn-search {
            display: flex;
            height: 72rpx;
            width: 100rpx;
            align-items: center;
            justify-content: center;
            font-size: $font-size-28;
        }
    }
    .searchBar-actions {
        display: flex;
        flex-direction: row;
        margin-left: 16rpx;
        width: 156rpx;
        height: 72rpx;
        background: #ffffff;
        border-radius: 36rpx;
        border: 1rpx solid #cccccc;
        justify-content: center;
        .btn-action-item {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
